<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录 - 喝水小管家</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
            background-color: #f0f4f8;
        }
        .status-bar {
            background-color: #000;
            color: white;
            padding: 5px 15px;
            display: flex;
            justify-content: space-between;
            font-size: 12px;
        }
        .btn-primary {
            background: linear-gradient(145deg, #42a1ec, #0070c9);
            transition: all 0.3s ease;
        }
        .btn-primary:hover {
            background: linear-gradient(145deg, #0070c9, #42a1ec);
        }
        .input-field {
            transition: all 0.3s ease;
            border: 1px solid #e2e8f0;
        }
        .input-field:focus {
            border-color: #4299e1;
            box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.2);
        }
        .wechat-btn {
            background-color: #07C160;
            transition: all 0.3s ease;
        }
        .wechat-btn:hover {
            background-color: #06b358;
        }
        .toggle-login {
            cursor: pointer;
            color: #4299e1;
            transition: all 0.3s ease;
        }
        .toggle-login:hover {
            color: #2b6cb0;
        }
    </style>
</head>
<body class="h-full">
    <!-- 状态栏 -->
    <div class="status-bar">
        <span>9:41</span>
        <div>
            <span class="mr-1"><i class="fas fa-signal"></i></span>
            <span class="mr-1"><i class="fas fa-wifi"></i></span>
            <span><i class="fas fa-battery-full"></i></span>
        </div>
    </div>

    <div class="min-h-screen flex flex-col justify-between py-6 px-6">
        <!-- 顶部Logo -->
        <div class="mt-16 flex justify-center">
            <div class="w-28 h-28 rounded-full bg-blue-500 flex items-center justify-center">
                <i class="fas fa-glass-water text-white text-5xl"></i>
            </div>
        </div>
        
        <!-- 欢迎文字 -->
        <div class="text-center mt-10 mb-10">
            <h1 class="text-3xl font-bold text-gray-800">喝水小管家</h1>
            <p class="text-gray-600 mt-2">科学饮水，健康生活</p>
        </div>
        
        <!-- 微信登录区域 -->
        <div id="wechat-login" class="space-y-6">
            <button class="wechat-btn w-full py-3 text-white font-medium rounded-lg shadow-md flex items-center justify-center">
                <i class="fab fa-weixin text-xl mr-2"></i>
                微信一键登录
            </button>
            
            <div class="relative flex items-center justify-center">
                <div class="flex-grow border-t border-gray-300"></div>
                <span class="flex-shrink mx-4 text-gray-500 text-sm">或使用其他方式登录</span>
                <div class="flex-grow border-t border-gray-300"></div>
            </div>
            
            <div class="flex justify-center">
                <span class="toggle-login text-sm" onclick="toggleLoginMethod()">短信验证码登录</span>
            </div>
        </div>
        
        <!-- 短信登录区域 (默认隐藏) -->
        <div id="sms-login" class="space-y-4 hidden">
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">手机号码</label>
                <input type="tel" class="input-field w-full p-3 rounded-lg focus:outline-none" placeholder="请输入手机号码">
            </div>
            
            <div class="relative">
                <label class="block text-sm font-medium text-gray-700 mb-1">验证码</label>
                <div class="flex">
                    <input type="text" class="input-field w-full p-3 rounded-lg focus:outline-none" placeholder="请输入验证码">
                    <button class="ml-2 px-4 py-3 bg-gray-200 text-gray-700 rounded-lg text-sm whitespace-nowrap">获取验证码</button>
                </div>
            </div>
            
            <div class="mt-8">
                <button class="btn-primary w-full py-3 text-white font-medium rounded-lg shadow-md">登录</button>
            </div>
            
            <div class="flex justify-center">
                <span class="toggle-login text-sm" onclick="toggleLoginMethod()">返回微信登录</span>
            </div>
        </div>
        
        <!-- 底部协议 -->
        <div class="mt-auto text-center text-xs text-gray-500 mb-4">
            登录即代表您同意<a href="#" class="text-blue-500">用户协议</a>和<a href="#" class="text-blue-500">隐私政策</a>
        </div>
    </div>

    <script>
        function toggleLoginMethod() {
            const wechatLogin = document.getElementById('wechat-login');
            const smsLogin = document.getElementById('sms-login');
            
            if (wechatLogin.classList.contains('hidden')) {
                wechatLogin.classList.remove('hidden');
                smsLogin.classList.add('hidden');
            } else {
                wechatLogin.classList.add('hidden');
                smsLogin.classList.remove('hidden');
            }
        }
    </script>
</body>
</html> 